<template>
  <div>
    <el-row type="flex" justify="end">
      <el-button
        type="success"
        icon="el-icon-edit"
        class="newQuestion"
        size="small"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </el-row>
    <el-form
      :inline="true"
      label-width="80px"
      :model="questionData"
      ref="formRef"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              placeholder="请选择"
              v-model="questionData.subjectID"
              @change="getSimple"
            >
              <el-option
                v-for="obj in subjectList"
                :label="obj.label"
                :value="obj.value"
                :key="obj.value"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              placeholder="请选择"
              v-model="questionData.twoLevelDirectory"
            >
              <el-option
                v-for="obj in twoLevelDirectoryList"
                :key="obj.value"
                :label="obj.label"
                :value="obj.label"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select placeholder="请选择" v-model="questionData.labelTag">
              <el-option
                v-for="obj in labelTagList"
                :key="obj.value"
                :label="obj.label"
                :value="obj.label"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              placeholder="根据题干搜索"
              class="inputClass"
              v-model="questionData.keyWord"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select placeholder="请选择" v-model="questionData.questionType">
              <el-option
                v-for="obj in questionTypeList"
                :key="obj.id"
                :value="obj.id"
                :label="obj.type"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select placeholder="请选择" v-model="questionData.difficulty">
              <el-option
                v-for="obj in difficultyList"
                :key="obj.id"
                :value="obj.id"
                :label="obj.type"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select placeholder="请选择" v-model="questionData.direction">
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select placeholder="请选择" v-model="questionData.creator">
              <el-option
                v-for="obj in creatorList"
                :key="obj.id"
                :value="obj.id"
                :label="obj.username"
              ></el-option
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input
              class="inputClass"
              v-model="questionData.remarks"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input
              class="inputClass"
              v-model="questionData.abbreviation"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              placeholder="请选择"
              style="width: 97px; margin-right: 4px"
              v-model="questionData.province"
              @change="getCityList"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              style="width: 97px"
              v-model="questionData.city"
            >
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-form-item>
              <el-button size="small" @click="delAllFn">清除</el-button>
              <el-button size="small" type="primary" @click="searchFn"
                >搜索</el-button
              >
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import { list } from '@/api/hmmm/subjects.js'
import { simpleSub } from '@/api/hmmm/subjects.js'
import { simpleDirectorys } from '@/api/hmmm/directorys.js'
import { simpleTags } from '@/api/hmmm/tags.js'
import { listUsers } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'QuestionsFilter',
  data () {
    return {
      questionData: {
        subjectID: '',
        twoLevelDirectory: '',
        labelTag: '',
        keyWord: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creator: '', // 录入人
        remarks: '', // 题目备注
        abbreviation: '', // 企业简称
        province: '',
        city: ''
      },
      subjectList: [], // 学科列表数据
      twoLevelDirectoryList: [], // 二级目录下拉菜单
      labelTagList: [], // 标签下拉菜单
      questionTypeList: [
        { id: '1', type: '单选' },
        { id: '2', type: '多选' },
        { id: '3', type: '简单' }
      ], // 试题类型列表
      difficultyList: [
        { id: '1', type: '简单' },
        { id: '2', type: '一般' },
        { id: '3', type: '困难' }
      ], // 难度下拉列表
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ], // 方向下拉列表
      creatorList: [], // 录入人列表
      provincesList: [], // 所有城市数据
      citysList: [] // 对应的地区列表
    }
  },
  created () {
    this.getSubjectList()
    this.getSimple()
    this.getUserList()
    this.getProvincesList()
  },
  methods: {
    //   获取学科列表数据
    async getSubjectList () {
      const { data } = await simpleSub()
      // console.log(data)
      this.subjectList = data
    },
    // 获取用户列表数据
    async getUserList () {
      const { data } = await listUsers()
      //   console.log(data)
      this.creatorList = data.list
    },
    // 获取学科简单列表数据
    async getSimple (id) {
      //   this.$refs.formRef.resetFields()
      if (id) {
        const res = await simpleDirectorys({ subjectID: id })
        this.twoLevelDirectoryList = res.data
        const { data } = await simpleTags({ subjectID: id })
        this.labelTagList = data
      }
    },
    // 获取所有城市数据
    getProvincesList () {
      this.provincesList = provinces()
    },
    // 获取地区列表数据
    async getCityList (province) {
      console.log(province)
      this.citysList = await citys(province)
    },
    // 清除功能
    delAllFn () {
      this.questionData = {
        subjectID: '',
        twoLevelDirectory: '',
        labelTag: '',
        keyWord: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creator: '',
        remarks: '',
        abbreviation: '',
        province: '',
        city: ''
      }
      this.$emit('getQuestionsList')
      this.$emit('getquestionsChoiceList')
    },
    // 搜索筛选功能
    searchFn () {
      this.$emit('searchFn', this.questionData)
    }
  }
}
</script>

<style lang="less" scoped>
.inputClass {
  width: 198px;
}
.newQuestion {
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 12px;
}
</style>
